<template>
	<view class="bag">
		<image src="@/static/Maskgroup.png" mode="widthFix" style="width: 750rpx;" class="bg"></image>
		<view class="imggop">
			<image src="@/static/jdylogin.png" mode="widthFix" style="width: 384rpx;" class="jdy"></image>
			<view class="imggop_f">
				请先在用户端入驻成为接单员
			</view>
		</view>
		<view class="inpgop">
			<view class="inp_o flex justify-between items-center">
				<input  v-model="phone" placeholder="请输入手机号" class="inp_f">
				<image src="@/static/del.png" mode="widthFix" style="width: 40rpx;" @click="phone=''"></image>
			</view>
			<view class="inp_t flex justify-between items-center" v-if="isyzm">
				<input  type="password" v-model="password" placeholder="请输入密码" class="inp_f" v-if="iskai">
				<input  type="number" v-model="password" placeholder="请输入密码" class="inp_f" v-else>
				<image src="@/static/guan.png" mode="widthFix" style="width: 40rpx;" @click="" v-if="iskai"
					@click="iskai=!iskai"></image>
				<image src="@/static/kai.png" mode="widthFix" style="width: 40rpx;" @click="" v-else
					@click="iskai=!iskai"></image>
			</view>
			<!-- 验证码 -->
			<view class="inp_t flex justify-between items-center" v-else>
				<input type="number" v-model="yzm" placeholder="请输入验证码" class="inp_f">
				<view class="hqyzm">
					<span v-if="value==60" @click="sendyzm">获取验证码</span>
					<span v-else>{{value}}s</span>
				</view>
			</view>
			<view class="inp_yzm" @click="isyzm=!isyzm">
				{{isyzm?'验证码登录':'密码登录'}}
			</view>
			<view class="inp_btn flex-center" @click="login">
				登录
			</view>
		</view>
		<view class="bom_f ">
			<view class="flex">
				<u-radio shape="circle" labelSize='20' @change="radioChange"></u-radio>
				<view class="f">
					同意
				</view>
				<navigator url="/pages/my/xy/xy?type=1" class="f" style="color: #3377FF;">
					《同路仁用户协议》
				</navigator>
				<view class="f">
					&
				</view>
				<navigator url="/pages/my/xy/xy?type=2" class="f" style="color: #3377FF;">
					《隐私协议》
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiovalue1: '',
				phone: '',
				iskai: true,
				isyzm: true,
				yzm: '',
				password: '',
				active: false,
				value: 60,
				timer: ''
			};
		},
		onHide() {
			console.log('onhide');
			uni.setStorageSync('phone', this.phone)
			uni.setStorageSync('active', this.active)
			uni.setStorageSync('value', this.value)
		},
		onShow() {
			console.log('onShow');
			let app = this
			let value1 = uni.getStorageSync('phone');
			let value2 = uni.getStorageSync('value');
			let value3 = uni.getStorageSync('active');
			if (value3) {
				this.phone = value1
				this.value = value2
				if (this.timer) {
					clearInterval(this.timer); // 清除之前的定时器
				}
				this.djs(); // 启动新的定时器
			}
		},
		methods: {
			login() {
				console.log(this.isyzm);
				if (!this.active) {
					uni.showToast({
						icon: 'none',
						title: '未勾选协议'
					})
					return
				}
				if(this.isyzm){
					this.$api.login({
						account: this.phone,
						password: this.password
					}).then(res => {
						console.log(res,'res');
						uni.setStorageSync('token', res.data.token);
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}).catch(err => {
						console.log(err,'err');
					});
				}else{
					this.$api.mobilelogin({
						mobile: this.phone,
						captcha: this.yzm
					}).then(res => {
						console.log(res,'res');
						uni.setStorageSync('token', res.data.token);
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}).catch(err => {
						console.log(err,'err');
					});
				}
				
				
				
			},
			radioChange(e) {
				this.active = true
			},
			sendyzm() {
				let app = this
				if (!this.phone) {
					console.log('this.phone', this.phone);
					uni.showToast({
						icon: 'none',
						title: '重新输入手机号'
					})
					return
				}
				if (!this.active) {
					uni.showToast({
						icon: 'none',
						title: '请阅读协议'
					})
					return
				}
				this.$api.send({
						mobile: this.phone,
					}).then(res => {
						uni.showToast({
							icon:'success',
							title:'发送成功'
						})
					}).catch(err => {
						console.log(err,'err');
					});
				this.djs()
				// 	send({
				// 		phone: this.phone,
				// 		scene: 'veri'
				// 	}).then(res => {
				// 		uni.showToast({
				// 			icon: 'success',
				// 			title: res.msg
				// 		})

				// 		this.djs()
				// 	})
			},
			djs() {
				this.timer = setInterval(() => {
					this.value--;
					if (this.value <= 0) {
						// 倒计时结束，清除计时器并显示完成消息  
						clearInterval(this.timer);
						clearInterval(this.value);
						this.value = 60
					} else {
						// 更新倒计时显示的文本  
						this.$forceUpdate();
					}
				}, 1000);
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
		background-color: #FFFFFF;
	}

	.bag {
		.bg {
			position: absolute;
			top: 0;
			z-index: -1;
		}

		.imggop {
			margin-left: 64rpx;

			.jdy {
				margin-top: 240rpx;
			}

			.imggop_f {
				font-size: 24rpx;
				color: #999CA3;
				margin: 10rpx 0;
			}
		}

		.inpgop {
			margin-left: 64rpx;
			margin-top: 208rpx;

			.inp_o {
				padding: 0 32rpx;
				width: 622rpx;
				height: 108rpx;
				background: rgba(51, 119, 255, 0.03);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				border: 2rpx solid rgba(51, 119, 255, 0.2);

				.inp_f {
					font-weight: bold;
					font-size: 28rpx;
				}
			}

			.inp_t {
				margin-top: 40rpx;
				padding: 0 32rpx;
				width: 622rpx;
				height: 108rpx;
				background: rgba(51, 119, 255, 0.03);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				border: 2rpx solid rgba(51, 119, 255, 0.2);

				.inp_f {
					font-weight: bold;
					font-size: 28rpx;
				}

				.hqyzm {
					font-size: 28rpx;
					color: #3377FF;
				}
			}

			.inp_yzm {
				margin-left: 20rpx;
				margin-top: 40rpx;
				font-size: 28rpx;
				color: #3377FF;
			}

			.inp_btn {
				margin-left: 20rpx;
				margin-top: 80rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				width: 590rpx;
				height: 100rpx;
				background: #3377FF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}
		}

		.bom_f {
			top: 92%;
			left: 70%;
			width: 100%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			position: absolute;
			bottom: 100rpx;
			margin: 0 auto;

			.f {
				font-size: 24rpx;
			}
		}

	}
</style>